<template>
  <div class="column column--grid">
    <!-- <header
      class="header header--secondary"
      v-for="(item, index) in props.gridheaderData"
      :key="index"
    >
      <a class="title" :href="item.link">
        <div class="link">{{ item.content }}</div>
      </a>
    </header> -->
    <header
      class="header header--secondary"
    >
      <a class="title" >
        <div class="link">HOW BAD IS IT</div>
      </a>
    </header>
    <div class="module module--section" >
      <div class="column column--full">
        <div class="element element--article is-lead video MarketWatchcom" v-for="(item, index) in gridmoduleData1" :key="index">
          <figure class="article__figure">
            <!-- 时间 -->
            <!-- <span class="article__length">{{item.title}}</span> -->
            <a class="figure__image video disableShadowBox" >
              <img
                class="lazyload"
                :src="imgPath+item.cover"
              />
              <i class="icon icon--play"></i>
            </a>
          </figure>
          <div class="article__content over-video">
            <h3 class="article__headline">
              <a class="link">
                {{item.title}}
              </a>
            </h3>
          </div>
        </div>

        <div class="element element--article video MarketWatchcom" v-for="(item, index) in gridmoduleData2" :key="index">
          <div class="article__content over-video">
            <h3 class="article__headline">
              <a class="link" >
                {{item.title}}
              </a>
            </h3>
          </div>
        </div>
      </div>
      <div class="element element--section-footer">
        <a class="btn btn--section">See More</a>
      </div>
    </div>
  </div>
</template>
<script  setup>
const props = defineProps(["gridmoduleData", ]);
let gridmoduleData1 = ref([props.gridmoduleData[0]])
let gridmoduleData2 = ref([props.gridmoduleData[1],props.gridmoduleData[2]])

import  getConfig  from "@/api/login.js";
let imgPath = ref('');
onMounted(()=>{
  changeVideo();
})
const changeVideo = () => {
  getConfig.getSystem()
  .then((res) => {
      if (res.code == "0") {
        imgPath.value = res.data.awsPrefix
      }
    })
    .catch((e) => {});
}
</script>
<style lang="scss" scoped></style>
